<template>
    <div id="selectLoginMode">
        <Header></Header>

        <PageDescription :urlAndWords="this.urlAndWords"></PageDescription>

        <div class="outside banxin">
            <div>
                <div class="word supplier" @click="supplier_login">
                    <span>服务供应商</span>
                    <span>Individual supplier</span>
                </div>

            </div>
            <div>
                <div class="word enterprise" @click="enterprise_login">
                    <span>企业</span>
                    <span>enterprise</span>
                </div>
            </div>
            <div>
                <div class="word admin" @click="admin_login">
                    <span>管理员</span>
                    <span>administrators</span>
                </div>
            </div>
        </div>

        <Footer></Footer>
    </div>

</template>

<script>
    import Header from "@/components/content/header/Header";
    import PageDescription from "@/components/content/pageDescription/PageDescription";
    import Footer from "@/components/content/footer/Footer";
    export default {
        name: "Login",
        components:{
        Header,
        PageDescription,
        Footer
        },
       data(){
            return{
                urlAndWords: {
                    url:require("@/assets/image/login/login.jpg"),
                    c_word:'登录',
                    e_word:'The Login',
                },
            }
        },
        methods:{
            supplier_login(){
                this.$router.push({name:'login',query: {imgurl:require("@/assets/image/login/providerLogin.jpg"),c_title:'提供商登录',e_title:'Provider login'}})
            },
            enterprise_login(){
                this.$router.push({name:'login',query: {imgurl:require("@/assets/image/login/enterpriseLogin.jpg"),c_title:'企业登录',e_title:'enterprise login'}})
            },
            admin_login(){
                this.$router.push({name:'login',query: {imgurl:require("@/assets/image/login/administratorsLogin.jpg"),c_title:'管理员登录',e_title:'administrators login'}})
            },
        }
    }

</script>

<style scoped>
    .outside{
        width: 80%;
        height: 790px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }
    .outside div{
        width: 342px;
        height: 342px;
        background-color: rgba(2, 125, 180, 1);
    }
    .word{
        color: white;
        font-size: 29px;
        text-align: center;
        line-height: 32px;
        display: flex;
        flex-direction: column;
        justify-content: center;
    }
</style>
